<template>
  <ul class="in-list-item px-4" :class="[style]">
    <li class="flex justify-between px-4 py-4 align-center text-nowrap">
      <slot></slot>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  theme: {
    type: String,
    default: "dark"
  }
});

const style = computed(() => {
  return props.theme;
});
</script>

<style lang="scss" scoped>
ul.in-list-item {
  border-radius: 4px;
  font-size: 12px;
  li {
    & div:first-child {
      display: flex;
      align-items: center;
    }
  }
}
.dark {
  border: 1px solid #4f4f4f;
  &:hover {
    background-color: #4f4f4f;
  }
}
::v-deep(.ant-input) {
  font-size: 12px !important;
  &::placeholder {
    color: #999 !important;
  }
}
.light {
  border: 1px solid #eee;
}
</style>
